import React, { useState } from 'react'
import { Button, Input, Form, Picker, Popup, Toast } from 'react-vant'
import { WefnumberQuery } from '../sevice/WefService'
import Billrecord from './Billrecord'
export default function Querybill() {


    //form表单
    const [form] = Form.useForm()

    //清空表单
    const reset = () => {
        form.resetFields()
    }

    let [billList, setbillList] = useState({})
    const onFinish = async (values) => {
       
        let { data } = await WefnumberQuery({
            paymentNo: values.paymentNo,
            categoryId: values.categoryId
        })

        if (data.code == 200) {
            if (data.data) {
                setState('bottom')  //下方弹出框
                setbillList(data.data)
            } else {
                Toast({
                    message: '未查询到用户缴费账单',
                })
            }
        }
        reset()
    }

    // console.log(billList);
    //控制弹出层
    const [state, setState] = useState('')
    const onClose = () => setState('')

    return (
        <div>


            <div style={{ paddingTop: 30 }}>
                <p style={{ textAlign: 'center', paddingTop: 10, fontSize: 20 }}>查询缴费账单</p>
                <Form
                    style={{ padding: 20 }}
                    form={form}
                    onFinish={onFinish}
                    footer={
                        <div style={{ margin: '16px 16px 0' }}>
                            <Button round nativeType='submit' type='primary' block>
                                提交
                            </Button>
                        </div>
                    }>


                    <Form.Item
                        rules={[{ required: true, message: '请输入缴费编号' }]}
                        name='paymentNo'
                        label='缴费编号'
                    >
                        <Input placeholder='请输入缴费编号' />
                    </Form.Item>


                    <Form.Item
                        rules={[{ required: true, message: '请选择需要查询的记录' }]}
                        isLink
                        name='categoryId'
                        label='缴费类型'
                        trigger='onConfirm'
                        onClick={(_, action) => {
                            action.current?.open()
                        }}
                    >
                        <Picker
                            popup
                            columns={[
                                '2',
                                '3',
                                '4']}>
                            {val => val || '(2水费 3电费 4燃气费'}
                        </Picker>
                    </Form.Item>

                </Form>

            </div>

            <Popup
                visible={state === 'bottom'}
                style={{ height: '60%' }}
                position='bottom'
                onClose={onClose}
            >
                <Billrecord billList={billList}></Billrecord>
            </Popup>

        </div>
    )
}
